<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<style>
    #message {
        width: 50%;
        height: 500px;
        border: 1px solid black;
        margin: auto;
        -webkit-overflow-scrolling: touch; /* 可以让页面在Native端滚动时模拟原生的弹性滚动效果  */
    }

    #inputVal {
        width: 50%;
        margin: auto;
        display: flex;
    }

    .chat-list {
        height: 500px;
        overflow: auto;
        -ms-overflow-style: none;
        padding-right: 10px;
        padding-left: 10px;
    }

    .chat-list::-webkit-scrollbar {
        width: 0 !important
    }

    #message .buyer {
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-left: 10px;
    }

    /*#message .buyer::before {*/
    /*    !*content: '用户';*!*/
    /*    !*content: attr(data-before);*!*/
    /*    font-weight: bold;*/
    /*    position: absolute;*/
    /*    top: 50%;*/
    /*    left: -40px;*/
    /*    margin-top: -15px;*/
    /*}*/

    #message .buyer-conent::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: -10px;
        margin-top: -10px;
        border-top: 5px solid transparent;
        border-right: 10px solid #3a8ee6;
        border-bottom: 5px solid transparent;
    }

    #message .me {
        display: flex;
        justify-content: flex-end;
        position: relative;
        margin-right: 35px;
    }

    #message .time{
        text-align: center;
        font-size: 12px;
    }


    #message .me::after {
        content: '我';
        position: absolute;
        font-weight: bold;
        top: 50%;
        right: -25px;
        margin-top: -15px;
    }

    #message .sys {
        text-align: center;
        color: #00b7ee;
    }

    #message .me-content::after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        right: -10px;
        margin-top: -10px;
        border-top: 5px solid transparent;
        border-left: 10px solid white;
        border-bottom: 5px solid transparent;
    }

    #message .me-content {
        max-width: 90%;
        padding: 10px;
        display: inline-block;
        background-color: white;
        border-radius: 5px;
        text-align: left;
        margin-bottom: 10px;
    }

    #message .buyer-conent {
        max-width: 90%;
        padding: 10px;
        display: inline-block;
        background-color: #3a8ee6;
        color: white;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .qqBox{
        width: 798px;
        height: 600px;
        border: 1px solid #ccc;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .BoxHead{
        width: 100%;
        height: 52px;
        background: url(./TIM20170926103645_01.jpg) no-repeat;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .headImg{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin:0 10px;
    }
    .headImg img{
        width: 100%;
        height: 100%;
        border-radius:50%;
    }
    .internetName{
        width: auto;
        height: 52px;
        line-height: 52px;
        color: white;
    }
    .context{
        -webkit-box-flex: 1;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .conLeft{
        width: 200px;
        overflow: auto;
        background: #fafafa;
    }
    .conLeft::-webkit-scrollbar{
        width: 0;
    }
    .conLeft ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .conLeft li{
        width: 100%;
        height: 62px;
        line-height: 62px;
        color: dodgerblue;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        position: relative;
    }
    .conLeft li .liLeft{
        width:30%;
        height: 100%;
    }
    .liLeft img{
        margin: 10px;
    }
    .liRight span{
        display:block;
        font-size: 16px;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .liRight span:last-child{
        font-size: 14px;
        color: #767676;
        line-height:15px;
        overflow: hidden;
    }
    .conRight{
        background-color: white;
        -webkit-box-flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .Righthead{
        width: 100%;
        height: 42px;
        border-bottom: 1px solid #ccc;
    }
    .headName{
        width: auto;
        height: 100%;
        line-height: 42px;
        margin-left: 20px;
        font-family: "寰蒋闆呴粦";
        font-size: 18px;
        float: left;
    }
    .headConfig{
        width: 20%;
        float: right;
        height: 100%;

    }
    .headConfig ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .headConfig li{
        margin:10px 5px;
    }
    .RightCont{
        -webkit-box-flex: 1;
        overflow-y: scroll;
    }

    .RightCont::-webkit-scrollbar{
        width: 15px;
    }
    .RightCont ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .RightCont li{
        width: 100%;
        height: 50px;
        /*display: -webkit-box;*/
        /*-webkit-box-orient: horizontal;*/
        margin-top: 20px;
    }
    .nesHead{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-left:15px ;
        float: right;
    }
    .nesHead img{
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    .news{
        width: auto;
        height:auto;
        background: #2683f5;
        padding:10px 20px;
        margin: 8px;
        line-height:20px;
        font-size: 14px;
        border-radius:10px;
        margin-left: 30px;
        position: relative;
        float: right;
        color: white;
    }
    .news .jiao{
        position: absolute;
        right: -8px;
        top: 10px;
    }
    .news .Expr{
        width: 30px;
        height: 30px;
        margin: 5px;
    }
    .answerHead{
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-left:15px ;
        float: left;
    }
    .answerHead img{
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
    .answers{
        width: auto;
        height: 30px;
        background: #eeeeee;
        padding:5px 20px;
        margin: 4px;
        line-height: 30px;
        font-size: 14px;
        border-radius:10px;
        margin-left: 10px;
        position: relative;
        float: left;
    }
    .answers .jiao{
        position: absolute;
        left: -8px;
        top: 10px;
    }
    .RightFoot{
        width: 100%;
        height: 118px;
        border-top: 1px solid #ccc;
        position: relative;
    }
    .sys-content{
        text-align: center;
    }
    .footTop{
        width: 100%;
        height: auto;
    }
    .footTop ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        -webkit-box-orient: horizontal;
    }
    .footTop li{
        margin: 5px 10px;
    }
    .sendBtn{
        width: 68px;
        height: 25px;
        background: #0188fb;
        border: none;
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: white;
    }
    .bg{
        background: #ebebec;
    }
    .ChatRecord{
        width: 100%;
        height: 20px;
        text-align: center;
        font-size: 12px;
        color: deepskyblue;
        cursor: pointer;
        display: none;
    }

    .conLeft .dot{
        position: absolute;
        right: 15px;
        top: 20px;
        background-color: red;
        width: 10px;
        height: 10px;
        border-radius: 20px;
        display: none;
    }

</style>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="chat" lay-allowClose="true">
    <div class="qqBox">
        <div class="BoxHead">
            <div class="headImg">
            </div>
            <div class="internetName">在线沟通(<span id="onlineNum">0</span>)人</div>
        </div>
        <div class="context">
            <div class="conLeft">
                <ul>
<!--                    <li>-->
<!--                        <div class="liRight">-->
<!--                            <div class="intername">前端交流群</div>-->
<!--                        </div>-->
<!--                        <div class="dot"></div>-->
<!--                    </li>-->
<!--                    <li class="bg">-->
<!--                        <div class="liRight">-->
<!--                            <div class="intername">赵鹏</div>-->
<!--                        </div>-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="conRight">
<!--                <div class="Righthead">-->
<!--                    <div class="headName">赵鹏</div>-->
<!--                </div>-->
                <div class="RightFoot" style="display: none;">
                    <div class="inputBox">
                        <textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols=""></textarea>
                        <button class="sendBtn">发送(s)</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<audio src="/admin/8858.mp3" id="mp3" controls="controls" style="display: none;" >
    当前浏览器不支持audio
</audio>
<audio src="/admin/offline.mp3" id="offline" controls="controls" style="display: none;" >
    当前浏览器不支持audio
</audio>
<script src="/admin/js/parsejson.js"></script>
<script>
    var $ = layui.jquery;
    var websocket=null;
    function getRootPath() {
        //http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        //uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        //http://localhost:8083
        var localhostPaht = curWwwPath.substring(6, pos);
        // uimcardprj
        var projectName = pathName
            .substring(0, pathName.substr(1).indexOf('/') + 1);
        if (projectName == "/pc" || projectName == "/admin" || projectName == "/weixin" || projectName == "/wap")
            projectName = "";

        return (localhostPaht);
    }

    //获取当前时间
    function getCurrentDate(){
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var str=y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d)+'  '+(h<10?('0'+h):h)+':'+(min<10?('0'+min):min)+':'+(s<10?('0'+s):s);
        return str;
    }
    function lianjie() {
        var kefuid = localStorage.getItem("kefu_id");
        let host = getRootPath();
        if(kefuid==null || kefuid==undefined){
            layer.msg("请先登录");
            return ;
        }
        websocket = new WebSocket("ws:" + host + "/websocket/" + kefuid + "/user2/" + kefuid);
        jianliWebSocket();
    }
    // 添加系统消息
    function systemMsg(msg, type) {
        // if (uname != undefined) {
        //     if (uname.startsWith("+")) {
        //         uname = uname.substring(1);
        //     }
        // }

        var s = '<div class="sys"><div class="sys-content">' + msg + '</div></div>';
        if(type==1)     // 添加到主屏
            $('.conRight').append(s);
        else            // 添加到聊天界面
        {
            $('.newsList').append(s);
            // let gao =  $('.RightCont').find(".newsList")[0].scrollHeight;
            $('.RightCont').each(function () {
                $(this).scrollTop(90000);
            })
        }
        // $("." + uname).find('.chat-list').append(s);
    }
    // 一打开页面就建立链接
    lianjie();

    //建立websocket的相关功能
    function jianliWebSocket() {
        websocket.onopen = function () {
            // heartCheck.reset().start();      //心跳检测重置
            systemMsg("服务器连接成功",1);
            // layer.msg("服务器链接成功");
        };
        websocket.onclose = function (e) {
            // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
            systemMsg("服务器连接失败",1);
        };
        websocket.onmessage = function (event) {
            var info = JSON.parse(event.data);

            if(info.type==1){       // 有新用户来了
                // 播放提示音
                document.getElementById("mp3").play();
                document.getElementById("onlineNum").innerHTML++;
                let arr=[];
                $(".intername").each(function () {
                    arr.push($(this).html());
                })
                if(arr.indexOf(info.to)<0){
                    let cls = `${info.to}`;
                    if(arr.length<1)
                        cls+=' bg'
                    let s = `<li class="${cls}">
                        <div class="liRight">
                            <div class="intername">${info.to}</div>
                        </div><div class="dot"></div>
                    </li>`;
                    $(".conLeft ul").append(s);     //添加左侧用户名
                    if(arr.length<1) {
                        let str = `<div class="RightCont ${info.to}">
                                <ul class="newsList"></ul>
                                </div>`;
                        $(".RightFoot").before(str);        // 添加右侧对话框
                    }else{
                        let str = `<div class="RightCont ${info.to}" style="display: none;">
                                <ul class="newsList"></ul>
                                </div>`;
                        $(".RightFoot").before(str);        // 添加右侧对话框
                    }
                    //获取好友网名
                    $(".conLeft ul").delegate("li","click",function () {
                        $(this).addClass('bg').siblings().removeClass('bg');
                        let cls = $(this).attr("class").replace(" bg","");
                        $(".RightCont").hide();
                        $(this).find(".dot").hide();
                        $(".RightCont").each(function () {
                           if($(this).hasClass(cls))
                               $(this).show();
                        })
                    })
                }
                $(".RightFoot").show();
            }else if(info.direction==2){
                document.getElementById("mp3").play();
                let str=`<li><div class="answers"><img class="jiao" src="./TIM20170926103645_03_02.jpg">${info.msg}</div></li>`;
                //将滚动条始终保持在底部
               let s = info.from;
                $('.conRight').find('.'+s).find(".newsList").append(str);
                let gao =  $('.conRight').find('.'+s).find(".newsList")[0].scrollHeight;
                $('.conRight').find('.'+s).scrollTop(gao);
                // 标记红色dot
                $(".conLeft").find('.'+s).find(".dot").show();
            }else if(info.type==3){     // 用户离开了
                document.getElementById("offline").play();
                systemMsg(info.from+"已离开");
                document.getElementById("onlineNum").innerHTML--;
            }
        };
        websocket.onerror = function () {
            systemMsg("服务器连接失败");
        };
    }

    //发送消息
    $('.sendBtn').on('click',function(){
        var news=$('#dope').val();
        let reg = /</g;
        let reg2 = />/g;
        news=news.replace(reg,'&lt;').replace(reg2,'&gt;')
        if(news==''){
            alert('不能为空');
        }else{
            $('#dope').val('');
            var str='';
            str+='<li>'+
                '<div class="news"><img class="jiao" src="./talk.jpg">'+news+'</div>'+
                '</li>';
            let s = $(".bg").attr("class");
            s = s.replace(" bg","");
            $('.conRight').find('.'+s).find(".newsList").append(str);
            let gao =  $('.conRight').find('.'+s).find(".newsList")[0].scrollHeight;
            //将滚动条始终保持在底部
            $('.conRight').find('.'+s).scrollTop(gao);
            var data = {"direction": 1, "from": 'randId', "to": s, "msg": news};
            websocket.send(JSON.stringify(data));
        }
    })

    //展开历史消息
    $('.RightCont').on('click','.ChatRecord',function(){
        $('.newsList li:eq(0),li:gt(0)').show();
        $('.ChatRecord').hide();
    })
    // 回车事件
    $(window).keypress(function (event) {
        if(event.which === 13){
            $('.sendBtn').click();
        }
    })

</script>

</body>
</html>